<template>
  <div class="page gray-page building-page">
    <nav-bar :title="title"></nav-bar>
    <div class="page-main" v-if="houseInfo">
      <van-sticky class="page-scroll" :offset-top="56">
        <div class="building-personnel-list" v-if="houseInfo.person.length">
          <gb-card
            class="list-item"
            labelType="plain"
            :labelText="item.baseTypeName"
            color="#E28556"
            v-for="(item, key) in houseInfo.person"
            :key="key"
            @click="
              $router.push({
                path: '/resident/detail/person',
                query: {
                  personCode: item.personCode,
                  baseType: item.baseType,
                  queryType: '1',
                  residentType: item.residentType
                }
              })
            "
          >
            <dl class="gb-card-dl">
              <dt>
                <template v-if="item.personImage">
                  <img :src="$config.ImageURl + item.personImage" alt="" />
                </template>
                <template v-else>
                  <img
                    :src="
                      require(`@/assets/images/inspectVisit/visit/pic_photo_${
                        item.sex === '1' ? 'man' : 'woman'
                      }@2x.png`)
                    "
                    alt=""
                  />
                </template>
                <div style="height: 36px"></div>
              </dt>
              <dd>
                <p class="gb-card-info">
                  <span class="gb-card-info__label" style="width: auto">姓名</span>
                  <span class="gb-card-info__value">{{ item.personName }}</span>
                </p>
                <p class="gb-card-info">
                  <span class="gb-card-info__label" style="width: auto">性别</span>
                  <span class="gb-card-info__value">{{ item.sexName }}</span>
                </p>
                <p class="gb-card-info">
                  <span class="gb-card-info__label" style="width: auto">联系方式</span>
                  <span class="gb-card-info__value">{{ item.phone }}</span>
                </p>
                <p class="gb-card-info">
                  <span class="gb-card-info__label" style="width: auto">证件号码</span>
                  <span class="gb-card-info__value">{{ item.idCard }}</span>
                </p>
                <p class="gb-card-info">
                  <span class="gb-card-info__label" style="width: auto">人员管理类型</span>
                  <span class="gb-card-info__value">{{ item.residentTypeName }}</span>
                </p>
              </dd>
            </dl>
          </gb-card>
        </div>
        <template v-else>
          <van-empty
            :image="require('@/assets/images/basic/pic_no_content.png')"
            description="暂无内容~"
            style="height: 300px"
          />
        </template>
      </van-sticky>
      <div class="gridmap-bottom">
        <p class="gridmap-name">{{ $route.query.curRoomName }}</p>
        <van-row class="gridmap-regist-list">
          <van-col :span="12" class="gridmap-regist-item">
            房屋间数：
            <span class="gridmap-regist-num">{{ houseInfo.house.houseNum }}</span>
          </van-col>
          <van-col :span="12" class="gridmap-regist-item">
            房屋面积（平方米）：
            <span class="gridmap-regist-num">{{ houseInfo.house.houseArea }}</span>
          </van-col>
          <van-col :span="12" class="gridmap-regist-item">
            房屋类别：
            <span class="gridmap-regist-num">{{ houseInfo.house.houseTypeName }}</span>
          </van-col>
          <van-col :span="12" class="gridmap-regist-item">
            房屋性质：
            <span class="gridmap-regist-num">{{ houseInfo.house.houseStateName }}</span>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>

<script>
import gridMap from '@/api/gridMap'
export default {
  data() {
    return {
      houseInfo: null,
      title: ''
    }
  },
  created() {
    this.title = this.$route.query.curUnitName + this.$route.query.curRoomName
    this.getHousedetail()
  },
  methods: {
    getHousedetail() {
      // 获取房屋详情
      gridMap.Build.housedetail({
        houseCode: this.$route.query.houseCode
      }).then(res => {
        const { status, data } = res.data
        if (status === 0) {
          this.houseInfo = data
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/assets/style/list.less';
@import '~@/assets/style/gridmap/index.less';
@import '~@/assets/style/gridmap/BuildingPersonnel/index.less';
</style>
